<template>
	<view class="content">
		<image :src="baseInfo.thumb" mode="widthFix"></image>
		<view class="header header-more">
			<view class="horizontal">
				<view class="line"></view>
				<view class="header-title">施工现场</view>
			</view>
			<image class="share-image" src="../../../../static/share.png" mode="widthFix"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in constructionList" :key="index">
				<image class="item-image" :src="item.img_url" mode="scaleToFill"></image>
				<view class="item-title">{{ item.tag_name }}</view>
			</view>
		</view>
		<view v-if="isLoadDataComplete" class="btn" hover-class="btn-hover" type="default" size="mini" @click="isShowConfirm = true">预约</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'more',
				baseInfo: {},
				constructionList: [],
				total: 0,
				page: 1,
				limit: 10,
				id: 0,
				isLoadDataComplete: false
			};
		},
		onReachBottom() {
			this.loadNextPage();
		},
		onLoad(e) {
			this.id = e.id;
			this.loadPage(true);
		},
		methods: {
			loadNextPage() {
				if (this.page < this.total / this.limit) {
					this.page++;
					this.loadPage(false);
				} else {
					this.isLoadDataComplete = true;
				}
			},
			loadPage(isFirstLoad) {
				uni.showLoading({
					title: '加载中...'
				});
				setTimeout(
					() => {
						uni.request({
							url: 'https://baiyi.kent.work/api/v1/system/getConstructionDetail',
							method: 'POST',
							data: {
								id: this.id,
								page: this.page,
								limit: this.limit
							},
							success: res => {
								this.baseInfo = res.data.data.baseInfo;
								this.page = res.data.data.list.page;
								this.total = res.data.data.list.total;
								this.constructionList = this.constructionList.concat(res.data.data.list
									.list);
								uni.setNavigationBarTitle({
									title: this.baseInfo.name
								})
							},
							complete() {
								uni.hideLoading();
							}
						});
					},
					isFirstLoad ? 0 : 400
				);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.header {
			margin: 40rpx 40rpx 0rpx 40rpx;
		}

		.header-title {
			margin-left: 20rpx;
			font-size: 28rpx;
		}

		.share-image {
			width: 32rpx;
		}

		.list {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;

			.item {
				border-radius: 12rpx;
				margin: 20rpx 40rpx 0rpx 40rpx;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

				.item-image {
					height: 406rpx;
					border-radius: 12rpx 12rpx 0rpx 0rpx;
				}

				.item-title {
					text-align: center;
					padding: 20rpx 0;
					font-size: 24rpx;
				}

				.title::before {
					content: '— ';
					color: #3d9c36;
				}

				.title::after {
					content: ' —';
					color: #3d9c36;
				}
			}
		}
	}
</style>